<template>
  <div class="ooter">
    <div id="cloud">
      <span class="shadow">
      </span>
    </div>
    <div>
      <div id='c1'>分享链接:
        <span id='text'>http://139.196.144.248:8080/#/answer/{{QID64}}</span>
        <div id="qrcode" style="width:120px; height:120px;margin:0 auto;">

        </div>
        <el-button type="text" @click="changeQID">更改链接</el-button>
      </div>
      <h2 id='c2'>该问卷尚未创建</h2>
    </div>
  </div>

</template>
<script>
import AES from "../common/AES.js";
export default {
  name: "Publish",
  data() {
    return {
      QID: -1,
      baseURL: this.$serve.baseURL,
      QID64: ""
    };
  },
  mounted() {
    this.QID = this.$route.params.QID;
    var m = AES.encrypt(this.QID);
    this.QID64 = m.replace(/\//g, "BUAA");
    if (this.QID != -1) {
      document.getElementById("c2").style = "display:none;";
    } else {
      document.getElementById("c1").style = "display:none;";
    }
    this.makeCode();
  },
  methods: {
    makeCode() {
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 120,
        height: 120
      });
      var elText = document.getElementById("text");
      // 网址为空，使用弹框提示
      if (!elText.innerText) {
        alert("Input a text");
        elText.focus();
        return;
      }
      // 生成二维码
      var str = elText.innerText + this.QID64;
      qrcode.makeCode(str);
      console.log(str);
    },
    changeQID() {
      this.$serve
        .changeQID(this.QID)
        .then(res => {
          this.$message.success("修改链接成功,请重新进入问卷");
          this.$router.replace("/manage");
        })
        .catch(err => {
          console.log(err);
          this.$$message.error("修改链接失败");
        });
    }
  },
  watch: {
    $route(newVal) {
      this.QID = newVal;
    },
    QID: function() {
      // this.QID64=window.btoa(this.QID);
      this.QID64 = AES.encrypt(this.QID);
      // this.makeCode();
      // console.log(this.QID);
      // console.log(this.QID64);
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background: white;
}
#c1 {
  height: 520px;
  overflow: hidden;
}
#cloud {
  width: 330px;
  height: 120px;
  background: #f2f9fe;
  background: -webkit-linear-gradient(top, #f2f9f3 5%, #d6f0fd 100%);
  background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
  border-radius: 100px;
  position: relative;
  margin: 120px auto 20px;
}
#cloud:after,
#cloud:before {
  content: "";
  position: absolute;
  background: #f2f9fe;
  z-index: -1;
}
#cloud:after {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 50px;
  border-radius: 100px;
}
#cloud:before {
  width: 180px;
  height: 180px;
  top: -90px;
  right: 50px;
  border-radius: 200px;
}
.shadow {
  width: 350px;
  position: absolute;
  bottom: -10px;
  background: #000;
  z-index: -1;
  box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
h2,
#c1 {
  width: 80%;
  height: 50px;
  line-height: 50px;
  /* background-color: rgb(235, 235, 235); */
  /* border: 1px dashed rgba(24, 144, 255, 0.05); */
  box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 30px;
  font-size: 1.5em;
}
#c1 {
  height: 280px;
}
</style>